<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兰蔻首页</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/bigSwiper.css">
    <link rel="stylesheet" href="../css/swiper2.css">
    <link rel="stylesheet" href="../css/小标题轮播.css">
    <link rel="stylesheet" href="../css/三框.css">
    <link rel="stylesheet" href="../css/nav.css">
</head>

<body>
    <div class="wrapper">
        <!-- 登陆注册提示框部分 -->
        <div class="alert" id="register-alert"></div>

        <!-- 最顶部cookie权限提示 -->
        <div class="top-nav">
            <div class="top-nav-container">
                <p>
                    浏览该网站表示您接受并同意我们使用cookies为您提供个性化的浏览体验。点击
                    <a target="_blank" href="https://policy.lorealchina.com/cookiespolicy">Cookies政策</a>
                    了解详情
                </p>
                <i class="icon e-cookies-policy-close">

                </i>
            </div>
        </div>

        <!-- 顶部导航部分 -->
        <header class="header">
            <div class="header-container">
                <!-- logo部分 -->
                <div class="header-content">
                    <div class="logo">
                        <a href="index.html">
                            <img src="../images/logo.png" title="兰蔻官方商城" alt="兰蔻官方商城">
                        </a>
                    </div>
                </div>
                <!-- 选项卡1 -->
                <div class="nav-content">
                    <div class="nav-wrap">
                        <div class="header-scroll-container">
                            <ul class="nav">
                                <li>
                                    <a href="index.html">首页</a>
                                </li>
                                <li>
                                    <a href="hufu.html">护肤</a>
                                    <!-- 二级菜单 -->
                                    <div class="sub-menu sub-menu-2 sub-menu-line">

                                        <!-- 列表选择部分 -->
                                        <div class="nav-menu">
                                            <ul>
                                                <!-- 查看所有护肤产品 -->
                                                <!-- <li class="view-all">
                                                            <a href="">
                                                                查看所有护肤产品
                                                                <i class="icon icon-right-arrow-black"></i>
                                                            </a>
                                                        </li> -->

                                                <!-- 第一列数据 -->
                                                <li class="list1">
                                                    <a href="#">产品类型</a>
                                                    <!-- 三级菜单 -->
                                                    <div class="sub-menu-3">
                                                        <ul>
                                                            <li>
                                                                <a href="#">
                                                                    卸妆&洁面
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    美容液&爽肤水
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    精华
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    眼部护理
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    乳液
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    面霜
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    面膜
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    防晒隔离
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>

                                                <!-- 第二列数据 -->
                                                <li class="list1">
                                                    <a href="#">产品系列</a>
                                                    <!-- 三级菜单 -->
                                                    <ul class="sub-menu-3">
                                                        <li>
                                                            <a href="#">
                                                                清灌清洁系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                小黑瓶系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                菁纯系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                净澈焕肤系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                轻透防晒系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                塑颜系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                水份缘系列
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                男士系列
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>

                                                <!-- 第三列数据 -->
                                                <li class="list1">
                                                    <a href="#">肌肤需求</a>
                                                    <!-- 三级菜单 -->
                                                    <ul class="sub-menu-3">
                                                        <li>
                                                            <a href="#">
                                                                卸妆清洁
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                舒缓保湿
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                精华修护
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                净澈焕肤
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                美白淡斑
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                紧致提拉
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                抗老愈颜
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>

                                            </ul>
                                        </div>
                                        <!-- 图片部分 -->
                                        <div class="nav-banner">
                                            <div class="">
                                                <a href="#">
                                                    <img src="../images/active-img/b1.jpg" alt="">
                                                    <div>兰蔻「小黑瓶」</div>
                                                    <p>快修护 强维稳 ></p>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <a href="hufu.html">彩妆</a>
                                    <!-- 二级菜单 -->
                                    <div class="sub-menu sub-menu-2 sub-menu-line">

                                        <!-- 列表选择部分 -->
                                        <div class="nav-menu">
                                            <ul>
                                                <!-- 第一列数据 -->
                                                <li class="list1">
                                                    <a href="#">底妆</a>
                                                    <!-- 三级菜单 -->
                                                    <div class="sub-menu-3">
                                                        <ul>
                                                            <li>
                                                                <a href="#">
                                                                    妆前乳
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    气垫霜
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    粉底
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    蜜粉&散粉
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    修容遮瑕
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    腮红
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>

                                                <!-- 第二列数据 -->
                                                <li class="list1">
                                                    <a href="#">唇妆</a>
                                                    <!-- 三级菜单 -->
                                                    <ul class="sub-menu-3">
                                                        <li>
                                                            <a href="#">
                                                                唇膏
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                唇釉
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>

                                                <!-- 第三列数据 -->
                                                <li class="list1">
                                                    <a href="#">眼妆</a>
                                                    <!-- 三级菜单 -->
                                                    <ul class="sub-menu-3">
                                                        <li>
                                                            <a href="#">
                                                                睫毛膏
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                眼线笔
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                眉部
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>

                                            </ul>
                                        </div>
                                        <!-- 图片部分 -->
                                        <div class="nav-banner">
                                            <div class="">
                                                <a href="#">
                                                    <img src="../images/active-img/b2.jpg" alt="">
                                                    <div>全新兰蔻「小蛮腰」</div>
                                                    <p>唇膏全新菁纯唇膏重磅上市 ></p>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <a href="hufu.html">香水</a>
                                    <!-- 二级菜单 -->
                                    <div class="sub-menu sub-menu-2 sub-menu-line">

                                        <!-- 列表选择部分 -->
                                        <div class="nav-menu">
                                            <ul>
                                                <!-- 第一列数据 -->
                                                <li class="list1">
                                                    <a href="#">女士香水</a>
                                                    <!-- 三级菜单 -->
                                                    <div class="sub-menu-3">
                                                        <ul>
                                                            <li>
                                                                <a href="#">
                                                                    美丽人生系列
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    奇迹系列
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    真爱系列
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#">
                                                                    殿堂系列
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>

                                            </ul>
                                        </div>
                                        <!-- 图片部分 -->
                                        <div class="nav-banner">
                                            <div class="">
                                                <a href="#">
                                                    <img src="../images/active-img/b3.jpg" alt="">
                                                    <div>美丽人生香水</div>
                                                    <p>快乐因你而生 ></p>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.lancome.com.cn/hotsales">甄选新品
                                        <span class="tag">
                                            HOT
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="active.html">菁纯奢宠
                                        <span class="tag">
                                            HOT
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.lancome.com.cn/landingpage/kimpure-video">菁纯精华上市
                                        <span class="tag">
                                            HOT
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.lancome.com.cn/cxlhbox">尝鲜礼盒
                                        <span class="tag">
                                            HOT
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.lancome.com.cn/landingpage/trial-home">试用中心</a>
                                </li>
                                <li>
                                    <a href="https://www.lancome.com.cn/landingpage/landingpage-member">会员中心</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 图标 -->
                    <div class="functional-area">
                        <ul class="float-clearfix">
                            <!-- 搜索图标 -->
                            <li class="nav-search">
                                <a href="#">
                                    <div class="icon-header-search-white"></div>
                                </a>
                            </li>
                            <!-- 购物车图标 -->
                            <li class="header-shopping-bag">
                                <a href="shopCar.html">
                                    <div class="icon-header-cart"></div>
                                </a>
                            </li>
                            <!-- 登录注册图标 -->
                            <li class="header-login">
                                <!-- 头像图标 -->
                                <a href="login.html">
                                    <div class="icon-header-logins"></div>
                                    <img src="../images/touxiang.jpg" alt="">
                                </a>

                                <!-- 选项卡2 -->
                                <div class="black">
                                    <div class="nav2">
                                        <!-- 选项之前若隐若现的logo -->
                                        <div class="logoSmall">
                                            <a href="index.html">
                                                <img src="../images/logo.png" title="兰蔻官方商城" alt="兰蔻官方商城">
                                            </a>
                                        </div>
                                        <!-- 选项 -->
                                        <div class="nav-wrap">
                                            <div class="header-scroll-container">
                                                <ul class="nav">
                                                    <li>
                                                        <a href="index.html">首页</a>
                                                    </li>
                                                    <li>
                                                        <a href="hufu.html">护肤</a>
                                                        <!-- 二级菜单 -->
                                                        <div class="sub-menu sub-menu-2 sub-menu-line black-menu">

                                                            <!-- 列表选择部分 -->
                                                            <div class="nav-menu">
                                                                <ul>
                                                                    <!-- 查看所有护肤产品 -->
                                                                    <!-- <li class="view-all">
                                                                <a href="">
                                                                    查看所有护肤产品
                                                                    <i class="icon icon-right-arrow-black"></i>
                                                                </a>
                                                            </li> -->

                                                                    <!-- 第一列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">产品类型</a>
                                                                        <!-- 三级菜单 -->
                                                                        <div class="sub-menu-3">
                                                                            <ul>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        卸妆&洁面
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        美容液&爽肤水
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        精华
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        眼部护理
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        乳液
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        面霜
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        面膜
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        防晒隔离
                                                                                    </a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </li>

                                                                    <!-- 第二列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">产品系列</a>
                                                                        <!-- 三级菜单 -->
                                                                        <ul class="sub-menu-3">
                                                                            <li>
                                                                                <a href="#">
                                                                                    清灌清洁系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    小黑瓶系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    菁纯系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    净澈焕肤系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    轻透防晒系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    塑颜系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    水份缘系列
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    男士系列
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>

                                                                    <!-- 第三列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">肌肤需求</a>
                                                                        <!-- 三级菜单 -->
                                                                        <ul class="sub-menu-3">
                                                                            <li>
                                                                                <a href="#">
                                                                                    卸妆清洁
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    舒缓保湿
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    精华修护
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    净澈焕肤
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    美白淡斑
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    紧致提拉
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    抗老愈颜
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>

                                                                </ul>
                                                            </div>
                                                            <!-- 图片部分 -->
                                                            <div class="nav-banner">
                                                                <div class="">
                                                                    <a href="#">
                                                                        <img src="../images/active-img/b1.jpg" alt="">
                                                                        <div>兰蔻「小黑瓶」</div>
                                                                        <p>快修护 强维稳 ></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <a href="caizhuang.html">彩妆</a>
                                                        <!-- 二级菜单 -->
                                                        <div class="sub-menu sub-menu-2 sub-menu-line black-menu">

                                                            <!-- 列表选择部分 -->
                                                            <div class="nav-menu">
                                                                <ul>
                                                                    <!-- 第一列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">底妆</a>
                                                                        <!-- 三级菜单 -->
                                                                        <div class="sub-menu-3">
                                                                            <ul>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        妆前乳
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        气垫霜
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        粉底
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        蜜粉&散粉
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        修容遮瑕
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        腮红
                                                                                    </a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </li>

                                                                    <!-- 第二列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">唇妆</a>
                                                                        <!-- 三级菜单 -->
                                                                        <ul class="sub-menu-3">
                                                                            <li>
                                                                                <a href="#">
                                                                                    唇膏
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    唇釉
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>

                                                                    <!-- 第三列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">眼妆</a>
                                                                        <!-- 三级菜单 -->
                                                                        <ul class="sub-menu-3">
                                                                            <li>
                                                                                <a href="#">
                                                                                    睫毛膏
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    眼线笔
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="#">
                                                                                    眉部
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>

                                                                </ul>
                                                            </div>
                                                            <!-- 图片部分 -->
                                                            <div class="nav-banner">
                                                                <div class="">
                                                                    <a href="#">
                                                                        <img src="../images/active-img/b2.jpg" alt="">
                                                                        <div>全新兰蔻「小蛮腰」</div>
                                                                        <p>唇膏全新菁纯唇膏重磅上市 ></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <a href="xiangshui.html">香水</a>
                                                        <!-- 二级菜单 -->
                                                        <div class="sub-menu sub-menu-2 sub-menu-line  black-menu">

                                                            <!-- 列表选择部分 -->
                                                            <div class="nav-menu">
                                                                <ul>
                                                                    <!-- 第一列数据 -->
                                                                    <li class="list1">
                                                                        <a href="#">女士香水</a>
                                                                        <!-- 三级菜单 -->
                                                                        <div class="sub-menu-3">
                                                                            <ul>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        美丽人生系列
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        奇迹系列
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        真爱系列
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#">
                                                                                        殿堂系列
                                                                                    </a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </li>

                                                                </ul>
                                                            </div>
                                                            <!-- 图片部分 -->
                                                            <div class="nav-banner">
                                                                <div class="">
                                                                    <a href="#">
                                                                        <img src="../images/active-img/b3.jpg" alt="">
                                                                        <div>美丽人生香水</div>
                                                                        <p>快乐因你而生 ></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.lancome.com.cn/hotsales">甄选新品
                                                            <span class="tag">
                                                                HOT
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="active.html">菁纯奢宠
                                                            <span class="tag">
                                                                HOT
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.lancome.com.cn/landingpage/kimpure-video">菁纯精华上市
                                                            <span class="tag">
                                                                HOT
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.lancome.com.cn/cxlhbox">尝鲜礼盒
                                                            <span class="tag">
                                                                HOT
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a
                                                            href="https://www.lancome.com.cn/landingpage/trial-home">试用中心</a>
                                                    </li>
                                                    <li>
                                                        <a
                                                            href="https://www.lancome.com.cn/landingpage/landingpage-member">会员中心</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- 图标 -->
                                        <div class="functional-area">
                                            <ul class="float-clearfix">
                                                <!-- 搜索 -->
                                                <li class="nav-search">
                                                    <a href="#">
                                                        <div class="icon-header-search-white"></div>
                                                    </a>
                                                </li>
                                                <!-- 购物车 -->
                                                <li class="header-shopping-bag">
                                                    <a href="shopCar.html">
                                                        <div class="icon-header-cart"></div>
                                                    </a>
                                                </li>
                                                <!-- 登录注册图标 -->
                                                <li class="header-login">
                                                    <!-- 头像图标 -->
                                                    <a>
                                                        <div class="icon-header-logins"></div>
                                                        <img src="../images/touxiang.jpg" alt="">
                                                    </a>

                                                    <!-- 登陆注册悬浮框 -->
                                                    <div class="login-hover">
                                                        <div class="dialog">
                                                            <div class="log-container">
                                                                <!-- 广告部分 -->
                                                                <p class="welcome">兰蔻会员欢迎您，注册享积分，登陆享礼遇！</p>
                                                                <!-- 登陆注册部分 -->
                                                                <div class="login-register">



                                                                    <!-- 登陆注册按钮 -->
                                                                    <ul class="tab-btn login_btn">
                                                                        <li class="is-active">登录</li>
                                                                        <li>注册</li>
                                                                    </ul>

                                                                    <!-- 登陆内容 -->
                                                                    <div class="log-content ">

                                                                        <!-- 具体填写的内容部分 -->
                                                                        <div class="tab-cont">
                                                                            <!-- 登录 -->
                                                                            <div class="tab-login-item">
                                                                                <!-- 账号 -->
                                                                                <div class="input-username">
                                                                                    <input type="text"
                                                                                        placeholder="手机号/邮箱">
                                                                                </div>
                                                                                <!-- 密码 -->
                                                                                <div class="input-password">
                                                                                    <input type="password"
                                                                                        placeholder="请填写密码">
                                                                                </div>
                                                                                <!-- 登录按钮 -->
                                                                                <div class="btn-box">
                                                                                    <a class="btn-black">登录</a>
                                                                                </div>

                                                                            </div>

                                                                        </div>

                                                                    </div>

                                                                    <!-- 注册内容 -->
                                                                    <div class="reg-content none">

                                                                        <!-- 具体填写的内容部分 -->
                                                                        <div class="tab-cont">
                                                                            <!-- 账号 -->
                                                                            <div class="input-username">
                                                                                <input type="text" placeholder="请填写账号">
                                                                            </div>
                                                                            <!-- 请填写密码 -->
                                                                            <div class="input-password">
                                                                                <input type="password"
                                                                                    placeholder="请填写密码">
                                                                            </div>
                                                                            <!-- 再次输入密码 -->
                                                                            <div class="input-rpassword">
                                                                                <input type="password"
                                                                                    placeholder="请再次输入您的密码">
                                                                            </div>
                                                                            <!-- 立即注册 -->
                                                                            <div class="register-btn">
                                                                                <a class="reg-btn">立即注册</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>




                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                    </div>

        </header>
    </div>

    <!-- 大轮播图 -->
    <div class="photo">
        <div class="photo-wrapper">
            <div class="photo-slide rotation">
                <img src="../images/index-img/一轮播1.jpg" />
            </div>
            <div class="photo-slide">
                <img src="../images/index-img/一轮播2.jpg" />
            </div>
            <div class="photo-slide">
                <img src="../images/index-img/一轮播3.jpg" />
            </div>
            <div class="photo-slide">
                <img src="../images/index-img/一轮播4.jpg" />
            </div>
            <div class="photo-slide">
                <img src="../images/index-img/一轮播5.jpg" />
            </div>
            <div class="photo-slide">
                <img src="../images/index-img/一轮播6.jpg" />
            </div>

        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
        <!-- Swiper JS -->
        <!-- <script src="../static/javascripts/bigSwiper.min.js"></script> -->

        <!-- Initialize Swiper -->
        <!-- <script>
            var swiper1 = new Swiper('.swiper1', {
                loop: true,
                pagination: '.swiper-pagination',
                paginationClickable: false,
                effect: "fade",
                autoplay: 4000,
                autoplayDisableOnInteraction: false,
                speed: 500,
                bulletActiveClass: 'my-bullet-active',
                // bulletClass : 'my-bullet1',
            });
        </script> -->
    </div>


    <!-- 兰蔻王牌新品 -->
    <div class="recommend-container">
        <h2>兰蔻王牌星品</h2>
        <!-- 星品内容部分 -->
        <div class="recommend-content">
            <!-- 小标题 -->
            <div class="recommend-tabs-title">
                <div class="tabs-item">
                    <span class="span-active">口碑力荐</span>
                    <div class="checked-icon-box"></div>
                </div>
                <div class="tabs-item">
                    <span class="">人气彩香</span>
                    <div class="checked-icon-box none"></div>
                </div>
                <div class="tabs-item">
                    <span class="">必囤套装</span>
                    <div class="checked-icon-box none"></div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="recommend-tabs-content">
                <div class="item">
                    <!-- 左图 -->
                    <div class="left">
                        <img src="../images/index-img/小黑瓶二轮播旁边.jpg" alt="">
                    </div>
                    <!-- 右轮播图 -->
                    <div class="right">
                        <!-- Swiper -->
                        <div class="swiper-container swiper2">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播1.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播2.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播3.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播4.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播5.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播6.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播7.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播8.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播9.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-img/二轮播10.jpg" alt="">
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>

                        <!-- Swiper JS -->
                        <!-- <script src="../static/javascripts/swiper2.js"></script> -->
                        <!-- Initialize Swiper -->
                        <!-- <script>
                            var swiper2 = new Swiper('.swiper2', {
                                loop: true,
                                autoplay: 2000,
                                autoplayDisableOnInteraction: false,
                                speed: 500,
                                pagination: '.swiper-pagination',
                                slidesPerView: 3,
                                paginationClickable: true,
                                slidesPerView: 'auto',
                                // spaceBetween: 30,
                                noSwipingSelector: '.swiper-slide',
                            });
                        </script> -->
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 兰蔻重磅新品 -->
    <div class="recommend-container">
        <h2>兰蔻重磅新品 尝鲜体验</h2>
        <div class="bigImg">
            <img src="../images/index-img/全新兰蔻.jpg" alt="">
        </div>
    </div>

    <!-- 探索明星系列 -->
    <div class="recommend-container">
        <h2>探索明星系列</h2>
        <!-- 星品内容部分 -->
        <div class="recommend-content">
            <!-- 小标题轮播 -->
            <!-- Swiper -->
            <div class="swiper-container swiper3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide checked-icon-box"><span class="checked">菁纯精华上市</span></div>
                    <div class="swiper-slide"><span class="">菁纯系列</span></div>
                    <div class="swiper-slide"><span class="">小黑家族系列</span></div>
                    <div class="swiper-slide"><span class="">极光系列</span></div>
                    <!-- <div class="swiper-slide"><span class="">塑颜系列</span></div>
                    <div class="swiper-slide"><span class="">防晒系列</span></div>
                    <div class="swiper-slide"><span class="">唇妆系列</span></div>
                    <div class="swiper-slide"><span class="">底妆系列</span></div> -->
                </div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div> -->
            </div>
            <!-- 大图 -->
            <div class="star-tabs">
                <div class="star-img">
                    <img src="../images/index-img/全新兰蔻菁纯.jpg" alt="">
                </div>
            </div>

            <!-- Swiper JS -->
            <!-- <script src="../static/javascripts/小标题轮播.js"></script> -->

            <!-- Initialize Swiper -->
            <!-- <script>
                var swiper3 = new Swiper('.swiper3', {
                    slidesPerView: 4,
                    centeredSlides: true,
                    spaceBetween: 30,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });

            </script> -->


        </div>
    </div>


    <!-- 官网特别服务 -->
    <div class="vip-container">
        <!-- 标题 -->
        <h2>官网特别服务</h2>
        <!-- 三框轮播图 -->
        <div class="swiper-container swiper4">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播4.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播5.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播6.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播7.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-img/三轮播8.jpg" alt="">
                </div>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
        </div>

        <!-- Swiper JS -->
        <!-- <script src="../static/javascripts/三框.js"></script> -->

        <!-- Initialize Swiper -->
        <!-- <script>
            var swiper4 = new Swiper('.swiper4', {
                slidesPerView: 3,
                spaceBetween: 0,
                centeredSlides: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                slidesPerView: 'auto',
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        </script> -->

    </div>

    <!-- 暖心尊崇礼遇 -->
    <div class="gift">
        <h2>暖心臻献 尊宠礼遇</h2>
        <div class="gift-img">
            <img src="../images/index-img/礼遇.jpg" alt="">
        </div>
    </div>

    <!-- 回到顶部 -->
    <!-- <div class="back-top">
        <div class="top">
            <img src="../images/index-img/back-top.png" alt="">
        </div>
        <div class="wpxp">
            <a>王牌星品</a>
        </div>

        <div class="zpxp">
            <a>重磅新品</a>
        </div>

        <div class="mxzp">
            <a>明星系列</a>
        </div>

        <div class="gwfw">
            <a>官网服务</a>
        </div>

        <div class="zcly">
            <a>尊宠礼遇</a>
        </div>
    </div> -->

    <footer class="footer">
        <!-- 黑色部分 -->
        <div class="footer-guide">
            <!-- 关于我们 -->
            <ul class="us">
                <li>
                    <div>关于我们</div>
                    <ul>
                        <li class="us-content">
                            <a href="#">加入兰蔻</a>
                        </li>
                        <li class="us-content">
                            <a href="#">会员中心</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>联系我们</div>
                    <ul>
                        <li class="us-content">
                            <a href="#">线上美容顾问</a>
                        </li>
                        <li class="us-content">
                            <a href="#">客服热线：400-820-8016</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        <a href="#">配送及退货</a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">专柜查询</a>
                    </div>
                </li>
                <li>
                    <div>关注我们</div>
                    <ul>
                        <li class="us-content">
                            <i class="icon icon-footer-weixin"></i>
                            <a href="#">官方微信</a>
                        </li>
                        <li class="us-content">
                            <i class="icon icon-footer-weibo"></i>
                            <a href="#">官方微博</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- 电子邮箱 -->
            <div class="email">
                <div class="email-content">
                    <p>
                        <i class="icon icon-mail"></i>
                        <span>电子邮件</span>
                    </p>
                    <div class="form-ipt">
                        <input type="text" placeholder="*输入您的邮箱" id="ipt">
                        <button class="footer-email-btn">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 白色部分 -->
        <div class="footer-container">

            <!-- 第一行 -->
            <p>
                国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。
            </p>

            <!-- 第二行 -->
            <ul>
                <li>
                    © L’Oreal China 欧莱雅（中国）有限公司版权所有
                </li>
                <li>
                    <i class="icon icon-hz1"></i>
                    中国工商沪ICP备08100043号-34
                </li>
                <li>
                    <i class="icon icon-hz2"></i>
                    沪公网安备 31010602001526号
                </li>
            </ul>

            <div class="gray">
                <!-- 第三行 -->
                <ul>
                    <li>使用条款</li>
                    <li>Cookies政策</li>
                    <li>隐私政策</li>
                </ul>

                <!-- 第四行 -->
                <p>
                    浏览该网站表示您接受并同意我们使 用cookies为您提供个性化的浏览体验。点击
                    <a href="https://policy.lorealchina.com/cookiespolicy">Cookies政策</a>
                    了解详情
                </p>
            </div>


        </div>
    </footer>

    <script src="../lib/jquery-2.2.4.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <!-- list.js依赖于axios,不要搞乱先后顺序 -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/rotation.js"></script>

</body>


</html>